<template>
    <view class="container">
        <view class="header">
            <text class="title">
                {{ item.title }}
            </text>
            <text v-if="tool" class="iconfont icon-tool" @tap="popuUp">
            </text>
        </view>
        <view class="center" @tap="goDetail">
            <view class="left" :style="{ width: item.images ? 70 + '%' : 100 + '%' }">
                <view class="user-msg">
                    <image class="avatar" :src="item.avatarUrl" />
                    <text>{{ item.nickname }}</text>
                </view>
                <view class="content">
                    {{ item.content.split('<br>').join('\n') }}
                </view>
            </view>
            <view class="right" v-if="item.images">
                <image class="img" :src="item.images[0].imageUrl" />
            </view>

        </view>
        <view class="tag" v-if="item.category">
            <text class="tag-title">
                {{ category[item.category].title }}
            </text>
        </view>
        <view class="footer">
            <view class="item">
                <text class="iconfont icon-liulan"></text>
                <text>{{ item.viewsCount }}</text>
            </view>
            <view class="item">
                <text v-if="!item.like" @tap="giveAlike(item)" class="iconfont icon-dianzan1"></text>
                <text v-if="item.like" @tap="giveAlike(item)" class="iconfont icon-dianzan-filled"></text>
                <text>{{ item.likesCount }}</text>
            </view>
            <view class="item">
                <text class="iconfont icon-pinglun"></text>
                <text>{{ item.commentsCount }}</text>
            </view>
        </view>
    </view>
    <uni-popup ref="popup" background-color="#fff">
        <view class="delete" @tap="deleteItem">
            <text class="iconfont icon-qingkonglishijilu"></text>
            <text class="text">删除</text>
        </view>
    </uni-popup>
</template>
<script setup lang="ts">
import type { Category } from '@/type/article'
import { category } from '@/utils/hook';
import type { ArticleItem } from '@/type/article';
import { API_giveAlike, API_deleteArticleItem } from '@/service/article';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
const props = defineProps<{
    item: ArticleItem;
    tool: boolean;
}>();
const emit = defineEmits(['delete'])
const popup = ref<any>();
//点赞
const giveAlike = async (item: ArticleItem) => {
    let res = await API_giveAlike(item.id, !props.item.like);
    if (res.code) {
        props.item.like = !props.item.like;
        props.item.likesCount = props.item.likesCount + (props.item.like ? 1 : -1);
    }
}
const popuUp = () => {
    popup.value.open('bottom')
}
//删除帖子
const deleteItem = async () => {
    let res = await API_deleteArticleItem(props.item.id);
    if (res.code == 1) {
        uni.showToast({ icon: 'none', title: '删除成功' });
        setTimeout(() => {
            emit('delete', true);
        }, 500)
    } else {
        uni.showToast({ icon: 'none', title: '删除失败' });
    }
    popup.value.close();
}
//去往帖子详细页
const goDetail = () => {
    // const item = encodeURIComponent(JSON.stringify(props.item));
    uni.navigateTo({ url: `/discovery_modules/postDetail/postDetail?id=${props.item.id}` });
}
</script>
<style scoped lang="scss">
.container {
    background-color: #fff;
    padding: 20rpx;
    box-shadow: $shadow;
    margin: 15rpx;

    .header {
        display: flex;
        justify-content: space-between;

        .title {
            width: 80%;
            word-wrap: break-word;
            font-size: 30rpx;
            font-weight: 700;
        }
    }


    .center {
        display: flex;
        font-size: 28rpx;
        margin: 15rpx 0;
        color: $color-title;

        .left {
            width: 70%;

            .user-msg {
                display: flex;
                align-items: center;
                margin-bottom: 15rpx;

                .avatar {
                    width: 50rpx;
                    height: 50rpx;
                    border-radius: 50%;
                    margin-right: 15rpx;
                }
            }

            .content {
                word-wrap: break-word;
                margin-bottom: 10rpx;
                height: 72rpx; //高度不能乱写，你要自己去看你的两行文字占多少高度
                font-size: 28rpx;
                overflow: hidden; //一定要写
                text-overflow: ellipsis; //超出省略号
                display: -webkit-box; //一定要写
                -webkit-line-clamp: 2; //控制行数
                -webkit-box-orient: vertical; //一定要写

            }
        }

        .right {
            width: 30%;
            margin-left: 10rpx;

            .img {
                width: 100%;
                height: 100%;
                border-radius: 5rpx;
            }
        }


    }

    .tag {
        display: flex;
        flex-direction: row-reverse;
        margin: 20rpx;

        &-title {
            right: 0;
            padding: 0 20rpx;
            height: 50rpx;
            line-height: 50rpx;
            border-radius: 50rpx;
            font-size: 24rpx;
            text-align: center;
            background-color: #ededed;
            color: $color-title;
            border: 1rpx solid #ddd;
        }

    }

    .footer {
        display: flex;
        justify-content: space-around;

        .item {
            color: #aaa;
            display: flex;
            align-items: center;
            font-size: 28rpx;

            .iconfont {
                color: $color-main;
            }
        }
    }
}

.delete {
    padding: 50rpx;
    display: flex;
    align-items: center;

    .iconfont {
        color: rgb(166, 18, 18);
        margin-right: 30rpx;
    }

    .text {
        color: $color-title;
        font-size: 30rpx;
    }
}
</style>
